<template>
  <div class="right_common">
    <cn-title title="公共服务"></cn-title>
    <div class="common_main">
      <div class="left_main">
        <div class="title d_a_c">
          <img src="@/assets/img/l_title.png" alt="" />
          品牌宣传
          <span style="width: 460px"></span>
        </div>
        <div class="container">
          <div class="l_l">
            <div class="small_title">
              <div class="triangle"></div>
              品牌营销
            </div>
            <vue-seamless-scroll
              :data="marketList"
              class="common_warp"
              :class-option="defaultOption"
            >
              <div
                v-for="(item, index) in marketList"
                :key="index + getRanddow()"
                class="ppyx_box"
              >
                <div class="img_box">
                  <div class="triangle_1"></div>
                  <div class="triangle_2"></div>
                  <img :src="item.img" alt="" />
                  <div class="b_t">{{ item.name }}</div>
                </div>
                <div class="des row_4_ellipsis">
                  {{ item.desc }}
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div @click.stop="handleSelectClick($event)" class="l_c">
            <div class="small_title">
              <div class="triangle"></div>
              直播服务
            </div>
            <vue-seamless-scroll
              :data="liveBroadcastList"
              class="common_warp"
              :class-option="defaultOption"
            >
              <div
                v-for="(item, index) in liveBroadcastList"
                :key="index + getRanddow()"
                accesskey="row"
                :data-obj="JSON.stringify(item)"
                class="video_container d_c"
              >
                <video class="video">
                  <source :src="item.url" type="video/mp4" />
                  <source :src="item.url" type="video/webm" />
                  <source :src="item.url" type="video/ogg" />
                </video>
                <img class="p_c" src="@/assets/img/icon_play.png" alt="" />
              </div>
            </vue-seamless-scroll>
          </div>
          <div class="l_r">
            <div class="small_title">
              <div class="triangle"></div>
              金融服务
            </div>
            <vue-seamless-scroll
              :data="financialServiceList"
              class="common_warp"
              :class-option="defaultOption"
            >
              <template v-for="(item, index) in financialServiceList">
                <div :key="index + getRanddow()" class="jr_box">
                  <div class="img_box d_c">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="jr_content">
                    <div class="jr_title blue">
                      简介
                      <div class="line"></div>
                    </div>
                    <div class="jr_desc text_color row_2_ellipsis">
                      {{ item.desc }}
                    </div>
                  </div>
                </div>
                <div :key="index + getRanddow()" class="dash"></div>
              </template>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div @click.stop="handleSelectClick($event)" class="center_main">
        <div class="title d_a_c">
          <img src="@/assets/img/l_title.png" alt="" />
          信息共享
          <span></span>
        </div>
        <div class="small_title">
          <div class="triangle"></div>
          金融服务
        </div>
        <vue-seamless-scroll
          :data="financialServiceList2"
          class="video_warp"
          :class-option="videoOption"
        >
          <div
            v-for="(item, index) in financialServiceList2"
            :key="index + getRanddow()"
            accesskey="row"
            :data-obj="JSON.stringify(item)"
            class="jr_box"
          >
            <div class="img_box d_c">
              <video class="video">
                <source :src="item.url" type="video/mp4" />
                <source :src="item.url" type="video/webm" />
                <source :src="item.url" type="video/ogg" />
              </video>
              <img class="p_c" src="@/assets/img/icon_play.png" alt="" />
            </div>
            <div class="jr_content">
              <div class="jr_title blue">
                案例介绍
                <div class="line"></div>
              </div>
              <div class="jr_desc text_color row_2_ellipsis">
                {{ item.desc }}
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
        <div class="small_title">
          <div class="triangle"></div>
          电商信用
        </div>
        <div class="dsxy">
          <div
            v-for="(item, index) in dsxyList"
            :key="index"
            :class="[index == 0 ? 'one' : index == 1 ? 'two' : 'three', 'flex']"
          >
            <div
              :class="[
                index == 0
                  ? 'one_img_box'
                  : index == 1
                  ? 'two_img_box'
                  : 'three_img_box',
                'd_c',
              ]"
            >
              <img class="img_box" :src="item.img" alt="" />
            </div>
            <div
              :class="[
                index == 0 ? 'one_box' : index == 1 ? 'two_box' : 'three_box',
                'd_a_c',
              ]"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="small_title">
          <div class="triangle"></div>
          智能物流
        </div>
        <div @click.stop="handleSelectClick($event)">
          <vue-seamless-scroll
            :data="logisticsVideoList"
            class="video2_warp"
            :class-option="videoOption2"
          >
            <div style="display: flex">
              <div
                v-for="(item, index) in logisticsVideoList"
                :key="index + getRanddow()"
                class="video_container d_c"
                style="margin-right: 20px; float: left"
                accesskey="row"
                :data-obj="JSON.stringify(item)"
              >
                <img class="video" :src="item.img" alt="" />
                <img class="p_c" src="@/assets/img/icon_play.png" alt="" />
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="right_main">
        <div class="title d_a_c">
          <img src="@/assets/img/l_title.png" alt="" />
          政务服务
          <span style="width: 90px"></span>
        </div>
        <div class="small_title">
          <div class="d_a_c">
            <div class="triangle"></div>
            金融服务
          </div>
          <span class="blue">数量</span>
        </div>
        <div id="commomChart1" class="chart_1"></div>
        <div class="small_title">
          <div class="d_a_c">
            <div class="triangle"></div>
            专利申请
          </div>
          <span class="blue">数量</span>
        </div>
        <div id="commomChart2" class="chart_1"></div>
        <div class="small_title">
          <div class="d_a_c">
            <div class="triangle"></div>
            法律咨询
          </div>
          <span class="blue">数量</span>
        </div>
        <vue-seamless-scroll
          :data="flList"
          class="fl_warp"
          :class-option="videoOption"
        >
          <div
            v-for="(item, index) in flList"
            :key="index + getRanddow()"
            class="flzx"
          >
            <img class="avatar" :src="item.img" alt="" />
            <div class="more">
              <div class="name">
                <span>{{ item.name }}</span>
              </div>
              <div class="desc">TEL：{{ item.phone }}</div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
    <cn-video :show="openVideo" :src="videoSrc" @close="closeVideo" />
  </div>
</template>

<script>
import CnTitle from "../common/CnTitle.vue";
import CnVideo from "../common/CnVideo.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    CnTitle,
    CnVideo,
    vueSeamlessScroll,
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    videoOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    videoOption2() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      videoSrc: "",
      openVideo: false,
      marketList: [
        {
          name: "绿豆",
          img: "/img/sc_1.png",
          desc: "“怀仁绿豆”具有颗粒饱满、色泽光亮、营 养丰富的特点，比同类产品微量元素怀仁绿豆”具有颗粒 饱满、色泽光亮、营养丰富的特点，比同 类产品微量元素",
        },
        {
          name: "羔羊肉",
          img: "/img/sc_1.png",
          desc: "“怀仁羔羊肉”色泽 均匀，有光泽，脂肪 呈乳白色，肌纤维清晰，有韧性。",
        },
        {
          name: "陶瓷",
          img: "/img/sc_1.png",
          desc: "怀仁陶瓷历史悠久， 工艺精湛，早在辽宋 时期就有“陶埴一技、独擅北方”之称。",
        },
        {
          name: "其他",
          img: "/img/sc_1.png",
          desc: "“怀仁绿豆”具有颗粒饱满、色泽光亮、营 养丰富的特点，比同类产品微量元素怀仁绿豆”具有颗粒 饱满、色泽光亮、营养丰富的特点，比同 类产品微量元素",
        },
      ],
      liveBroadcastList: [
        {
          url: "/test.mp4",
        },
        {
          url: "/test.mp4",
        },
        {
          url: "/test.mp4",
        },
        {
          url: "/test.mp4",
        },
      ],
      financialServiceList: [
        {
          img: "/img/sc_2.png",
          desc: "乡村E镇服务中心是 基层服务中心,乡村E镇服务中心是 基层服务中心",
        },
        {
          img: "/img/sc_2.png",
          desc: "乡村E镇服务中心是 基层服务中心,乡村E镇服务中心是 基层服务中心",
        },
        {
          img: "/img/sc_2.png",
          desc: "乡村E镇服务中心是 基层服务中心,乡村E镇服务中心是 基层服务中心",
        },
        {
          img: "/img/sc_2.png",
          desc: "乡村E镇服务中心是 基层服务中心,乡村E镇服务中心是 基层服务中心",
        },
      ],
      logisticsVideoList: [
        {
          img: "/img/sc_3.png",
          url: "/test.mp4",
        },
        {
          img: "/img/sc_3.png",
          url: "/test.mp4",
        },
      ],
      financialServiceList2: [
        {
          url: "/test.mp4",
          desc: "这里是金融服务行业视频简介视频简介视,这里是金融服务行业视频简介视频简介视",
        },
        {
          url: "/test.mp4",
          desc: "这里是金融服务行业视频简介视频简介视,这里是金融服务行业视频简介视频简介视",
        },
        {
          url: "/test.mp4",
          desc: "这里是金融服务行业视频简介视频简介视,这里是金融服务行业视频简介视频简介视",
        },
        {
          url: "/test.mp4",
          desc: "这里是金融服务行业视频简介视频简介视,这里是金融服务行业视频简介视频简介视",
        },
      ],
      flList: [
        {
          img: "/img/ldy_avatar.png",
          name: "刘大勇",
          phone: "1581789674",
        },
        {
          img: "/img/ldy_avatar.png",
          name: "刘大勇",
          phone: "1581789674",
        },
        {
          img: "/img/ldy_avatar.png",
          name: "刘大勇",
          phone: "1581789674",
        },
      ],
      dsxyList: [
        {
          img: "/img/jingdong.jpg",
          name: "京东",
        },

        {
          img: "/img/taobao.jpg",
          name: "淘宝",
        },
        {
          img: "/img/yamaxun.jpg",
          name: "亚马逊",
        },
      ],
    };
  },
  mounted() {
    this.renderCommonChart1();
    this.renderCommonChart2();
  },
  methods: {
    handleSelectClick(e) {
      let el = null;
      for (let i = 0; i < e.path.length; i++) {
        if (e.path[i].accessKey == "row") {
          el = e.path[i];
          break;
        }
      }
      if (el == null) return;
      let item = JSON.parse(el.dataset.obj);
      this.toPlay(item.url);
    },
    getRanddow() {
      let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      arr.sort(function () {
        return 0.5 - Math.random();
      });
      return +new Date() + arr;
    },
    closeVideo() {
      this.videoSrc = "";
      this.openVideo = false;
    },
    toPlay(src) {
      // this.$refs[elem].paused === true
      //   ? this.$refs[elem].play()
      //   : this.$refs[elem].pause();
      this.openVideo = true;
      this.videoSrc = src;
    },
    renderCommonChart1() {
      let myChart = this.$echarts.init(document.getElementById("commomChart1"));
      let option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#F6AD04"],
        grid: {
          left: "2%",
          right: "4%",
          bottom: "5%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#474A65",
              type: "solid",
            },
            show: true,
          },
          axisLabel: {
            fontSize: 11,
            color: "#BAE7FF",
          },
          axisTick: {
            show: false,
          },
          data: ["事项1", "事项2", "事项3", "事项4"],
        },
        yAxis: {
          type: "value",
          interval: 10,
          nameTextStyle: {
            fontSize: 12,
            color: "#BAE7FF",
            align: "center",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.15)",
              type: "dashed",
            },
          },
          splitArea: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            fontFamily: "Bebas",
            color: "#AED0EF",
          },
        },
        series: [
          {
            type: "line",
            // showSymbol: false,
            smooth: true,
            data: [5, 20, 9, 20], // 纵坐标数据
            areaStyle: {
              //区域填充样式
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(246,173,4,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(246,173,4, 0)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderCommonChart2() {
      let myChart = new this.$echarts.init(
        document.getElementById("commomChart2")
      );
      let option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#01FEA9"],
        grid: {
          left: "2%",
          right: "4%",
          bottom: "5%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#474A65",
              type: "solid",
            },
            show: true,
          },
          axisLabel: {
            fontSize: 11,
            color: "#BAE7FF",
          },
          axisTick: {
            show: false,
          },
          data: ["专利1", "专利2", "专利3", "专利4"],
        },
        yAxis: {
          type: "value",
          interval: 10,
          nameTextStyle: {
            fontSize: 12,
            color: "#BAE7FF",
            align: "center",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.15)",
              type: "dashed",
            },
          },
          splitArea: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            fontFamily: "Bebas",
            color: "#AED0EF",
          },
        },
        series: [
          {
            type: "line",
            // showSymbol: false,
            smooth: true,
            data: [5, 20, 9, 20], // 纵坐标数据
            areaStyle: {
              //区域填充样式
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(246,173,4,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(246,173,4, 0)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
  },
};
</script>

<style lang="scss" scoped>
.right_common {
  width: 100%;
  height: calc(100% - 338px - 322px - 20px);
  .common_main {
    height: calc(100% - 36px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    .common_warp {
      height: 290px;
      overflow: hidden;
    }
    .video_warp {
      width: 215px;
      height: 90px;
      overflow: hidden;
    }

    .fl_warp {
      width: 215px;
      height: 70px;
      overflow: hidden;
    }

    .video2_warp {
      width: 215px;
      height: 93px;
      overflow: hidden;
    }

    .title {
      color: #fff;
      font-size: 18px;
      text-align: left;
      height: 24px;
      margin: 10px 0;
      img {
        width: 15px;
        height: auto;
        margin-right: 10px;
      }
      span {
        display: inline-block;
        width: 80px;
        border-top: 1px dashed #aed0ef;
        margin: 0 20px;
        margin: 0 5px 0 20px;
        transform: translateY(-50%);
      }
    }
    .left_main {
      width: 590px;
      height: 100%;
      .container {
        width: 100%;
        height: calc(100% - 34px);
        display: flex;
        justify-content: space-between;
        .l_l {
          width: 250px;
          height: 100%;
          .ppyx_box {
            width: 235px;
            height: 80px;
            background-image: url("@/assets/img/kuang4.png");
            background-size: cover;
            margin: 10px 0 20px 0;
            padding: 4px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .des {
              width: 120px;
              height: 67px;
              font-size: 12px;
              color: #aed0ef;
              text-align: left;
            }
            .img_box {
              width: 91px;
              height: 67px;
              position: relative;
              .b_t {
                position: absolute;
                bottom: 0;
                left: 0;
                text-align: center;
                color: #fff;
                font-size: 12px;
                width: 100%;
                background: rgba(0, 0, 0, 0.6);
              }
              img {
                width: 100%;
                height: 100%;
              }
              .triangle_1 {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0px 0 16px 16px;
                border-color: transparent transparent transparent #012257;
                position: absolute;
                top: 0;
                left: 0;
              }
              .triangle_2 {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0px 0 13px 13px;
                border-color: transparent transparent transparent #009bff;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
              }
            }
          }
        }
        .l_c {
          width: 90px;
          height: 100%;
          .video_container {
            padding: 8px;
            width: 85px;
            height: 85px;
            background-image: url("@/assets/img/kuang3.png");
            background-size: cover;
            margin: 5px 0 15px 0;
            position: relative;
            .video {
              width: 72px;
              height: 72px;
            }
            img {
              width: 30px;
              height: 30px;
              z-index: 10;
              cursor: pointer;
            }
          }
        }
        .l_r {
          width: 215px;
          height: 100%;
          .jr_box {
            width: 100%;
            height: 90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .img_box {
              width: 81px;
              height: 81px;
              background-image: url("@/assets/img/kuang5.png");
              background-size: cover;
              img {
                width: 68px;
                height: 68px;
              }
            }
            .jr_content {
              width: 115px;
              height: 65px;
              .jr_title {
                font-size: 12px;
                display: flex;
                align-items: center;
                .line {
                  width: 67px;
                  height: 4px;
                  background: linear-gradient(to right, #009afd, #000630);
                  margin-left: 10px;
                }
              }
              .jr_desc {
                height: 45px;
                width: 100%;
                font-size: 12px;
                line-height: 24px;
                text-align: left;
              }
            }
          }
          .dash {
            border-top: 1px dashed rgba(255, 255, 255, 0.2);
            margin: 6px 0;
            width: 100%;
          }
        }
      }
    }
    .center_main {
      height: 100%;
      width: 226px;
      .dsxy {
        height: 75px;
        width: 100%;
        margin-bottom: 7px;
        position: relative;

        .flex {
          display: flex;
          align-items: end;
        }

        .img_box {
          height: 20px;
          width: auto;
          margin-top: 3px;
        }

        .text_box {
          width: 45px;
          height: 18px;
        }

        .one {
          position: absolute;
          top: 0;
          left: 53px;
        }
        .one_box {
          background-image: url("@/assets/img/gj_box.png");
          height: 18px;
          min-width: 40px;
          background-size: 100% 100%;
          color: #fff;
          font-size: 12px;
          padding: 0 10px;
        }
        .one_img_box {
          background-image: url("@/assets/img/gj.png");
          height: 35px;
          width: 33px;
        }

        .two {
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .two_box {
          background-image: url("@/assets/img/yj_box.png");
          height: 18px;
          min-width: 40px;
          background-size: 100% 100%;
          color: #fff;
          font-size: 12px;
          padding: 0 10px;
        }
        .two_img_box {
          background-image: url("@/assets/img/yj.png");
          height: 35px;
          width: 33px;
        }

        .three {
          position: absolute;
          bottom: 0;
          right: 0;
        }
        .three_box {
          background-image: url("@/assets/img/jj_box.png");
          height: 18px;
          min-width: 40px;
          background-size: 100% 100%;
          color: #fff;
          font-size: 12px;
          padding: 0 10px;
        }
        .three_img_box {
          background-image: url("@/assets/img/jj.png");
          height: 35px;
          width: 33px;
        }
      }

      .jr_box {
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img_box {
          width: 80px;
          height: 66px;
          background-image: url("@/assets/img/kuang2.png");
          background-size: cover;
          position: relative;
          img {
            width: 30px;
            height: 30px;
            z-index: 10;
            cursor: pointer;
          }
          .video {
            width: 70px;
            height: 58px;
          }
        }
        .jr_content {
          width: 115px;
          height: 65px;
          .jr_title {
            font-size: 12px;
            display: flex;
            align-items: center;
            .line {
              width: 34px;
              height: 4px;
              background: linear-gradient(to right, #009afd, #000630);
              margin-left: 10px;
            }
          }
          .jr_desc {
            height: 45px;
            width: 100%;
            font-size: 12px;
            line-height: 24px;
            text-align: left;
          }
        }
      }
      .video_container {
        padding: 8px;
        width: 214px;
        height: 93px;
        background-image: url("@/assets/img/kuang4.png");
        background-size: cover;
        margin: 5px 0 15px 0;
        position: relative;
        .video {
          width: 193px;
          height: 81px;
        }
        img {
          width: 50px;
          height: 50px;
          z-index: 10;
          cursor: pointer;
        }
      }
    }
    .right_main {
      height: 100%;
      width: calc(100% - 620px - 226px);
      .flzx {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        margin-bottom: 20px;
        .avatar {
          width: 60px;
          height: 60px;
        }
        .more {
          width: 140px;
          color: #fff;
          .name {
            width: 80%;
            margin: 0 auto;
            height: 14px;
            background-image: url("@/assets/img/name_bg.png");
            background-size: cover;
            position: relative;
            margin-bottom: 10px;
            span {
              position: absolute;
              top: -10px;
              left: 50%;
              width: 100%;
              transform: translateX(-50%);
            }
          }
          .desc {
            width: 100%;
          }
        }
      }
      .small_title {
        justify-content: space-between;
      }
      .chart_1 {
        height: 90px;
        width: 100%;
      }
    }
  }
}
</style>